// 函数组件快捷键 rfce
import React from 'react'
import Appson from './appson'
import Appdau from './appdau'
import { useState } from "react"
import { Swiper } from 'react-vant';
// npm run eject
function App() {
  // react 是单向数据流，不能子组件直接父组件的数据，
  // 子组件要想给父组件传参，需要父组件给子组件传递一个方法，子组件调用父组件得方法
  let [name, setName] = useState("zhangsan")
  let [data, setData] = useState("我是默认数据")
  let [ipt, setVal] = useState("")
  let [delipt, setdelipt] = useState("")
  let [arr,setArr] = useState([
      {
        tit:"标题1",
        con:"内容1"
      },
      {
        tit:"标题2",
        con:"内容2"
      },
      {
        tit:"标题3",
        con:"内容3"
      },

  ])
  let [activeIndex,setActiveindex] = useState(0)

  const sendson = (data) => {
    console.log(data);
    setData(data)
  }
  const setval = (e) => {
    console.log(e.target.value);
    // setVal(e.target.value)
  }
  const setval1 = (e) => {

  }
  const setIndex = (ind)=>{
    setActiveindex(ind)

  }
  return (
    <div>
      <h1>{data}</h1>
      <Appson send="我是父组件里的数据" send1={name} send2={sendson} />
      <hr />
      <Appdau send={name}></Appdau>

      <hr />
      {/* 在react中获取输入框的值需要使用受控组件或者非受控组件
        受控组件 就是说这个input框受某个变量得控制，如果这个变量不发生改变，input框就输入不上东西  */}
      {/* 一般情况下都用受控组件 */}
      <input type="text" value={ipt} onChange={setval} />
      <input type="text" defaultValue={delipt} onChange={setval1} />
      <hr />
      <Swiper className="my-swipe" autoplay={3000}>
        <Swiper.Item>1</Swiper.Item>
        <Swiper.Item>2</Swiper.Item>
        <Swiper.Item>3</Swiper.Item>
        <Swiper.Item>4</Swiper.Item>
      </Swiper>
      <hr />
       {
         arr && arr.length ? arr.map((item,index)=>{
           return <span key={index} onClick={()=>setIndex(index)} className={index===activeIndex?"active":""}>{item.tit}</span>
         }) :"暂无数据"
       }
       <div>{arr[activeIndex].con}</div>
    </div>
  )
}

export default App